<template>
  <div class="weui-cell weui-cell_input"
       :style='{color: activeColor || ""}'>
    <div class="weui-cell__hd">
      <div class="weui-label"
           :style='{opacity: label_hidden ? 0:1}'>
        <img class='icon'
             v-if="icon_url"
             :src="icon_url"
             alt=""> {{ left }}</div>
    </div>
    <div class="weui-cell__bd">
      <input class="weui-input text_ellipsis"
             maxlength='30'
             :value="right"
             :style='{color: rightActiveColor || ""}'
             disabled
             :placeholder="placeholder"
             @click='$emit("preview", right) ' />

    </div>
  </div>
</template>

<script>
// 展示型行内标签 p
export default {
  props: ['left', 'right', 'activeColor', 'label_hidden', 'rightActiveColor', 'placeholder', 'icon_url']
}
</script>

<style lang='scss' scoped>
.weui-cells_after-title::before {
  display: none;
}
.weui-cells_after-title::after {
  display: none;
}

.weui-label {
  width: auto;
  margin-right: 20rpx;
}
.weui-cells {
  font-size: 30rpx;
  position: none;
  margin-top: 0;
  margin: 0 30rpx;
  .weui-cell {
    padding: 0;
  }
}
.weui-cell__hd .icon {
  width: 76rpx;
  height: 75rpx;
  vertical-align: middle;
  margin-top: -3rpx;
  margin-right: 20rpx;
}
.weui-cell__bd {
  position: relative;
  letter-spacing: 0.06em;
  font-size: 30rpx;
  .weui-input {
    height: 120rpx;
    line-height: 120rpx;
  }
}
.icon_right {
  position: absolute;
  top: 50rpx;
  right: 0;
  width: 15rpx;
  height: 24rpx;
}
</style>